@use '../../styles/variables';

.background {
    background: #eecda3;
    background: -webkit-linear-gradient(to top, #eecda3, #ef629f);
    background: linear-gradient(to top, #eecda3, #ef629f);
    position:   fixed;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
}

.logo-container {
    display:    block;
    position:   fixed;
    box-sizing: border-box;
    padding:    10px;
    top:        50%;
    left:       50%;
    color:      white;
}

.logo {
    font-family: 'ArtelyInks';
}

.sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    width:      variables.$sidebar-width;
    height:     100%;
    padding:    15px;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (min-width: #{variables.$screen-sm-min}) {
    .logo-container {
        transform: translateY(-50%) translateX(calc(-50% + #{variables.$sidebar-width} / 2));
    }
    .logo {
        margin-top: -60px;
        font-size:  120px;
    }
    .description {
        font-size: 16px;
    }
}

@media (max-width: #{variables.$screen-xs-max}) {
    .logo-container {
        transform: translateY(-50%) translateX(-50%);
    }
    .logo {
        margin-top: -40px;
        font-size:  80px;
    }
    .description {
        font-size: 15px;
    }
}
